<template>
    <div class="">
        <el-card class="box-card">
            <el-input v-model="phoneNum" class="w200" placeholder="根据手机号搜索"></el-input>
            <el-input v-model="userName" class="w200" placeholder="根据名称搜索"></el-input>
            <el-button type="primary" @click="clear" size="large">清空</el-button>
            <el-button type="primary" @click="search" size="large">搜索</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" align="center"> </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center"> </el-table-column>
                <el-table-column prop="nickName" label="昵称" align="center"> </el-table-column>
                <el-table-column prop="cashAmount" label="余额" align="center"> </el-table-column>
                <el-table-column prop="deductionScore" label="积分" align="center"> </el-table-column>
                <el-table-column prop="exchangeAmount" label="批发券" align="center"> </el-table-column>
                <el-table-column label="操作" width="330" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="charge(scope.row.id)">充值</el-button>
                        <el-button type="primary" @click="spend(scope.row.id)">扣款</el-button>
                        <el-button type="primary" @click="addPro(scope.row.id)">添加库存</el-button>
                        <el-button type="primary" @click="lessPro(scope.row.id)">扣除库存</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pagenum"
                :page-sizes="[20, 30, 40, 50]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>
        <!-- 会员充值或者扣款面板 -->
        <el-dialog :title="isSpend ? '会员充值' : '会员扣款'" :visible.sync="moneyVisible" width="30%" @close="cancle">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item class="mb10" label="资金类别">
                    <el-select v-model="form.selectOption">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input class="w200" v-model.number="form.addNumber"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input class="w200" v-model="form.area"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="moneyVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmCharge" v-if="isSpend">确 定</el-button>
                <el-button type="primary" @click="confirmDeduct" v-else>确 定</el-button>

            </span>
        </el-dialog>

        <!--添加库存或者扣除库存面板 -->
        <el-dialog :title="isSpend ? '添加库存' : '扣除库存'" :visible.sync="addVisible" width="50%" @close="dialogOut">
            <el-form ref="form" :model="form1" label-width="80px">
                <el-form-item class="mb10" label="选择商品">
                    <el-select v-model="form1.selectOption" v-if="isSpend">
                        <el-option v-for="item in allGoodsList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                    <el-select v-model="form1.selectOption" v-else>
                        <el-option v-for="item in stockList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input class="w200" v-model.number="form1.addNumber"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input class="w200" v-model="form1.area"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button v-if="isSpend" type="primary" @click="addStock">确 定</el-button>
                <el-button v-else type="primary" @click="confirmLess">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getInfoList, getCountType, recharge, deduction, getUserCloudStock, addStock, deductStock } from '@/api/finace.js'
import { getGoodsDanpin } from '@/api/goods.js'
export default {
  name: 'liveoverview',
  data () {
    return {
      tableData: [],
      phoneNum: '',
      userName: '',
      roleId: null,
      total: 0,
      query: {
        pagesize: 20,
        pagenum: 1
      },
      options: [],
      form: {},
      form1: {},
      moneyVisible: false,
      isSpend: null,
      isAdd: null,
      addVisible: false,
      allGoodsList: [],
      stockList: []
    }
  },
  created () {
    // 获取会员信息
    this.getInfoList()

    // 获取账户类型下拉框
    this.getCountType()

    // 获取所有商品列表
    this.getGoodsList()
  },
  methods: {
    // 获取账户类型
    async getCountType () {
      const { Data } = await getCountType()
      console.log(Data)
      this.options = Data.dictList
    },

    // 获取会员信息
    async getInfoList () {
      const { Data } = await getInfoList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        mobile: this.phoneNum,
        nickName: this.userName
      })
      this.tableData = Data.list
      this.total = Data.paging.totalItemCount
      console.log(Data)
    },

    // 获取所有商品单品信息
    async getGoodsList () {
      const { Data } = await getGoodsDanpin()
      console.log(Data)
      this.allGoodsList = Data.dictList
    },

    // 清空搜索区域
    clear () {
      this.phoneNum = ''
      this.userName = ''
      this.getInfoList()
    },

    // 根据关键字搜索信息
    search () {
      this.getInfoList()
    },

    // 充值
    charge (id) {
      this.roleId = id
      this.isSpend = true
      this.moneyVisible = true
    },

    // 确定充值
    async confirmCharge () {
      console.log(this.roleId)
      console.log(typeof this.form.addNumber)
      console.log(typeof this.form.selectOption)
      const data = await recharge({
        id: this.roleId,
        fundType: this.form.selectOption,
        amount: this.form.addNumber.toFixed(4),
        remark: this.form.area
      })
      if (data.RequestStatus !== 200) return this.$message.error('充值失败')
      this.$message.success('充值成功')
      this.moneyVisible = false
      this.getInfoList()
      this.$refs.form.resetFields()
      console.log(data)
    },

    // 取消充值
    cancle () {
      this.moneyVisible = false
      this.form = {}
    },

    // 扣款
    spend (role) {
      this.roleId = role
      this.isSpend = false
      this.moneyVisible = true
    },

    // 确认扣款
    async confirmDeduct () {
      const data = await deduction({
        id: this.roleId,
        fundType: this.form.selectOption,
        amount: this.form.addNumber,
        remark: this.form.area
      })
      if (data.RequestStatus !== 200) return this.$message.error('扣款失败')
      this.$message.success('扣款成功')
      this.moneyVisible = false
      this.getInfoList()
      console.log(data)
    },

    // 添加库存
    addPro (roleId) {
      this.roleId = roleId
      this.addVisible = true
      this.isSpend = true
    },

    // 确认添加库存
    async addStock () {
      const data = await addStock({
        id: this.roleId,
        standardID: this.form1.selectOption,
        count: this.form1.addNumber,
        remark: this.form1.area
      })
      if (data.RequestStatus !== 200) return this.$message.error('添加库存失败')
      this.$message.success('添加库存成功')
      this.form1 = {}
      this.addVisible = false
      this.getInfoList()
      console.log(data.Authorization)
    },

    // 取消添加库存或者扣除库存
    dialogOut () {
      this.form1 = {}
    },

    // 减少库存
    async lessPro (roleId) {
      this.addVisible = true
      this.isSpend = false
      this.roleId = roleId
      console.log(this.roleId)
      const { Data } = await getUserCloudStock({
        id: this.roleId
      })
      this.stockList = Data.dictList
      console.log(Data)
    },

    // 确认扣除库存
    async confirmLess () {
      const data = await deductStock({
        id: this.roleId,
        standardID: this.form1.selectOption,
        count: this.form1.addNumber,
        remark: this.form1.area
      })
      console.log(data)
      this.addVisible = false
      this.getInfoList()
    },

    // 监听页面条数发生变化
    handleSizeChange (newPageSize) {
      this.query.pagesize = newPageSize
      this.getInfoList()
    },

    // 监听页面页数发生变化
    handleCurrentChange (newPageNum) {
      this.query.pagenum = newPageNum
      this.getInfoList()
    }
  }
}
</script>

<style scoped>
.w200 {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.el-table {
    margin-bottom: 20px;
}

.w100 {
    width: 100px;
}
.mb10 {
    margin-bottom: 40px;
}
</style>
